import { SearchOutlined } from '@ant-design/icons'
import { Button, Select, Input, Checkbox, Card, Popconfirm } from 'antd'
import { AvatarImage } from '@/desktop/components'
import { colors, breakWord, ellipsis } from '@/desktop/styles'
import { AccountQywxStatus, type AccountQywx } from '@/services/qywxs'
import { useQywxs, useChooseQywxs } from '../logics'
import { commonS } from './style'

export function ChooseQywxs({
  wxids: initialWxids,
  goNext: rawGoNext,
  onClose,
}: {
  wxids: string[]
  goNext: (updates: { wxids: string[]; qywxs: AccountQywx[] }) => void
  onClose: () => void
}) {
  const { qywxs, setKeyword, accountId, setAccountId, filteredQywxs, accounts } =
    useQywxs(initialWxids)
  const { wxids, switchChoose, hasChoosed, isChoosedAll, chooseAll, chooseReverse, clearChoose } =
    useChooseQywxs(initialWxids, qywxs, filteredQywxs)

  function goNext() {
    rawGoNext({
      wxids,
      qywxs: wxids
        .map(wxid => qywxs?.find(v => v.wxid === wxid))
        .filter((v): v is AccountQywx => !!v),
    })
  }

  return <div css={commonS.wrap}>
    <div css={commonS.tips}>选择要进行群发的企微账号</div>
    <div css={s.filter}>
      <Input
        prefix={<SearchOutlined />}
        placeholder="输入关键词搜索企微"
        onChange={e => setKeyword(e.target.value)}
        allowClear
      />
      <div>
        <label>所属账号：</label>
        <Select
          placeholder="按账号筛选"
          allowClear
          options={accounts.map(v => ({ label: v.name, value: v.id }))}
          popupMatchSelectWidth={false}
          value={accountId}
          onChange={setAccountId}
        />
      </div>
    </div>
    <div css={s.chooseAll}>
      <Checkbox
        checked={isChoosedAll}
        indeterminate={hasChoosed && !isChoosedAll}
        onClick={isChoosedAll ? clearChoose : chooseAll}
      />
      <a onClick={chooseAll}>全选</a>
      <span>/</span>
      <a onClick={chooseReverse}>反选</a>
    </div>
    <div css={s.list}>
      {filteredQywxs.map(qywx => {
        const choosed = wxids.includes(qywx.wxid)
        const offline = qywx.status !== AccountQywxStatus.Online
        return <Card
          key={qywx.wxid}
          onClick={() => switchChoose(qywx.wxid)}
          className={offline ? 'offline' : ''}
        >
          <Checkbox checked={choosed} />
          {offline ? <span className="offline-text">已离线</span> : null}
          <AvatarImage src={qywx.avatar} size={64} preview={false} />
          <div className="name">{qywx.friendlyName}1212</div>
          <div className="corp">{qywx.corpname}</div>
          <div className="account">账号 {qywx.accountName}</div>
        </Card>
      })}
    </div>
    <footer css={commonS.footer}>
      <Popconfirm title="确定取消编辑吗？任务内容将不会保存" onConfirm={onClose}>
        <Button size="large">取消</Button>
      </Popconfirm>
      <Button type="primary" size="large" disabled={!wxids.length} onClick={goNext}>
        下一步
      </Button>
    </footer>
  </div>
}

const s = {
  filter: css`
    column-gap: 18px;
    display: flex;
    margin-top: 16px;
    .ant-input-affix-wrapper {
      flex: 1;
    }
    label {
      color: #555;
      font-size: 13px;
    }
    .ant-select {
      width: 220px;
    }
  `,
  chooseAll: css`
    padding: 20px 0 8px;
    display: flex;
    align-items: center;
    .ant-checkbox-wrapper {
      transform: translateY(-1px);
      margin-right: 2px;
    }
    a {
      font-size: 12px;
      padding: 2px 4px;
    }
    & > span {
      color: ${colors.gray};
    }
  `,
  list: css`
    column-gap: 20px;
    display: flex;
    flex-shrink: 1;
    flex-wrap: wrap;
    overflow-y: auto;
    padding: 6px 0;
    row-gap: 20px;
    .ant-card {
      width: 180px;
      cursor: pointer;
      transition: box-shadow 0.2s;
      &:hover {
        box-shadow: 0px 2px 6px #f5f5f5;
      }
    }
    .ant-card-body {
      align-items: center;
      display: flex;
      flex-direction: column;
      height: 100%;
      line-height: 1.4;
      padding: 12px;
      position: relative;
      text-align: center;
    }
    .ant-checkbox-wrapper {
      position: absolute;
      left: 12px;
      top: 6px;
    }
    .ant-card.offline .ant-image {
      filter: grayscale(1);
    }
    .offline-text {
      color: ${colors.gray};
      font-size: 12px;
      position: absolute;
      right: 6px;
      top: 9px;
    }
    .name {
      ${breakWord};
      margin-bottom: 12px;
      margin-top: 12px;
    }
    .corp {
      ${breakWord};
      color: ${colors.gray};
      font-size: 12px;
      margin-bottom: 12px;
      flex: 1;
    }
    .account {
      ${ellipsis};
      color: #3f77fa;
      font-size: 12px;
    }
  `,
}
